<!--
<template>

    <el-steps :space="200" :active="2" finish-status="success">
        <el-step title="进行中"></el-step>
        <el-step title="步骤 2"></el-step>
        <el-step title="已完成"></el-step>

    </el-steps>

</template>


<script>
    export default {
        data() {
            return {

                form: {
                    phone: 110,
                    date:''
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>

-->
<template>

    <el-table
            :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
            style="width: 100%"
            :row-class-name="tableRowClassName">
    >
        <el-table-column type="expand">
            <template slot-scope="props">
                <el-steps  :active= props.row.status finish-status="success">
                    <el-step title="报修成功"></el-step>
                    <el-step title="开始维修"></el-step>
                    <el-step title="维修完成"></el-step>
                </el-steps>
            </template>

        </el-table-column>

        <el-table-column
                label="期望维修日期"
                prop="date">
        </el-table-column>
        <el-table-column
                label="故障名称"
                prop="name">
        </el-table-column>
        <el-table-column
                label="描述"
                prop="desc">
        </el-table-column>
        <el-table-column
                align="right">
            <template slot="header" slot-scope="scope">
                <el-input
                        v-model="search"
                        placeholder="输入关键字搜索"/>
            </template>
            <template slot-scope="scope" >
                <el-popover
                        placement="right"
                        width="550"
                        trigger="click"
                   >


                    <el-rate
                            style="height: 40px;margin-left: 10px"
                            v-model="evaluate.value"
                            disabled
                            show-score
                            text-color="#ff9900"
                            score-template="{value}">
                    </el-rate>

                    <el-input
                            style="margin-left: 10px"
                            type="text"
                            placeholder="请输入评分"
                            v-model="evaluate.value"
                            maxlength="1"
                            show-word-limit
                    >
                    </el-input>

                    <el-input
                            type="textarea"
                            style="margin-left: 10px"
                            placeholder="建议"
                            v-model="evaluate.advice"
                            maxlength="30"
                            show-word-limit
                    >
                    </el-input>
                    <el-button type="success" style="margin-left: 50px" @click="onsubmitEvaluate(scope.$index, scope.row)">确认评价</el-button>
                    <el-button type="success" style="margin-left: 50px" @click="test">重置</el-button>

                    <el-button slot="reference">评分</el-button>
                </el-popover>
                <el-button
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>

        </el-table-column>

    </el-table>

</template>

<style>
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .el-table .warning-row {
        background: ivory;
        font-weight: bold;
        color: #ff7d34;
    }

    .el-table .success-row {
        background: mintcream;
        font-weight: bold;
        color: #7700ff;
    }
    .el-table .info-row {
        font-weight: bold;
    }
</style>

<script>
    // eslint-disable-next-line no-unused-vars
    import { request } from "@/axios/request"
    export default {

        data() {
            return {
                value:3.7,
                evaluate:{value : 5.0,advice:""},
                tableData: [],
                search:"",
                dialogVisible:false,
                visible:false
            }
        },
        created() {
            this.getAll();
        },
        methods:{
            tableRowClassName({row, rowIndex}) {
                if (rowIndex %3 ==1) {
                    return 'success-row';
                }else if (rowIndex %3 == 2){
                    return 'info-row';
                }
                return 'warning-row';


            },
            test(){
                this.evaluate.value = 5;
                this.evaluate.advice = ""
            },
            onsubmitEvaluate(index,row){
                request({
                    url: "/malfunction/evaluate/"+row.id+"/"+this.evaluate.value+"/"+this.evaluate.advice,
                    method: "put",
                }).then((res) => {
                    if (res.data.stateCode == 200){
                        this.$message({
                            message:res.data.msg,
                            type:'success'
                        })}else {
                        this.$message({
                            message:res.data.msg,
                            type:'error'
                        })
                    }
                }).catch(()=>{
                    this.getAll();
                });
            },
            // eslint-disable-next-line no-unused-vars

            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
                this.$confirm('确认删除？')
                    .then(_ => {
                        request({
                            url: "/malfunction/"+row.id,
                            method: "delete",
                        }).then((res) => {
                            if (res.data.stateCode == 200){
                                this.$message({
                                    message:res.data.msg,
                                    type:'success'
                                })}else {
                                this.$message({
                                    message:res.data.msg,
                                    type:'error'
                                })
                            }
                        });
                    })
                    .finally(_ => {
                        this.getAll();
                    });

            },
            getAll(){
                request({
                    url: "/malfunction",
                    method: "get",
                }).then((res) => {
                    this.$nextTick(() => {
                        this.tableData = res.data.object;

                    })

                });
            }
        }
    }
</script>


